<template>
	<div>
		<van-nav-bar
			title="充值中心"
			left-text="返回"
			left-arrow
			@click-left="onClickLeft" />
		<div class="van-submit-bar__tip">
			<van-icon name="info-o" />
			公告: 未满18岁请在家长允许下充值!!!!!
		</div>

		<van-cell
			:title="'用户余额:   ' + info.money"
			value="元"
			icon="gold-coin" />

		<van-cell
			:title="'用户昵称:   ' + info.nickname"
			icon="manager" />

		<van-cell
			:title="'用户电话:   ' + info.mobile"
			icon="phone-circle" />

			<van-field
				v-model="custom"
				label="金额"
				placeholder="请输入自定义金额"
				readonly
				:error="!isError"
				clickable
				@touchstart.stop="show = true"
				class="hwx" />

			<div class="select">
				<div class="head">固定金额</div>
				<div class="op">
					<span
						v-for="item in price"
						:key="item.id" 
						@click="ckPrice(item.price)">
						<van-icon name="gold-coin"/>
						{{ item.price }}
					</span>
				</div>
			</div>

			<van-field
				v-model="message"
				rows="2"
				autosize
				label="备注"
				type="textarea"
				maxlength="30"
				placeholder="请输入备注"
				show-word-limit />

			<van-button
				round
				block
				type="primary"
				@click="sendOrder"
				>充值</van-button
			>
		<!-- 键盘 -->
		<van-number-keyboard
			v-model="custom"
			:show="show"
			maxlength="7"
			theme="custom"
			:extra-key="['.']"
			close-button-text="完成"
			@blur="show = false" />

			<van-overlay :show="show" @click="show" />

		<!-- 网络请求加载状态 -->
		<van-overlay :show="isLoading" style="display: flex; justify-content: center; align-items: center;">
			<van-loading vertical>
				<template #icon>
					<van-icon name="star-o" size="30" />
				</template>
				加载中...
			</van-loading>
		</van-overlay>
	</div>
</template>

<script>
	import { showDialog, showFailToast, showSuccessToast } from "vant";
	export default {
		created() {
			this.Pay();
		},
		data() {
			return {
				// 初始化信息
				info: {},
				// 输入键盘
				show: false,
				// 输入金额不正确就为false
				isError: true,
				// 固定金额渲染
				price: [
					{
						id: 1,
						price: "100",
					},
					{
						id: 2,
						price: "200",
					},
					{
						id: 3,
						price: "400",
					},
					{
						id: 4,
						price: "600",
					},
					{
						id: 5,
						price: "800",
					},
					{
						id: 6,
						price: "1000",
					},
				],
				// 金额
				custom: "",
				// 备注
				message: "",
				isLoading: false,
			};
		},
		methods: {
			// 页面初始化数据
			async Pay() {
				this.isLoading = true;
				let res = await this.$api.PayIndex({
					busid: this.$cookies.get("User").id,
				});
				
				if (res.code == 1) {
					// 把得到的金额处理再渲染
					this.info = res.data;
					// 去掉前面的0， 查找第一个大于0 的数
					this.info.money = this.info.money.slice(this.info.money.search(/[1-9]{1}/), this.info.money.length);
				} else {
					showFailToast({
						message: res.msg
					})
				}
				this.isLoading = false;
			},
			// 返回
			onClickLeft() {
				this.$router.push("/business");
			},
			// 提交充值
			sendOrder() {
				// 不能为空，并且通过校验
				if (!this.isError||this.custom == '') {
					showFailToast({ message: "非法金额" });
					return;
				}
				// 显示弹窗
				showDialog({
					title: "充值",
					message: "等待管理员审核后到账(请理智消费)\n确认充值金额----  "+this.custom+"  元",
					showCancelButton: true,
				}).then(async() => {
					this.isLoading = true;
					// 提交订单
					let res = await this.$api.SendPrice({
						// 用户id
						busid: this.$cookies.get("User").id,
						// 充值金额
						point: this.custom,
						// 备注
						content: this.message,
					});
					// 判断请求是否成功
					if (res.code == 1) {
						showSuccessToast({
							message: res.msg,
						});
						this.$router.push("/business/payrecord");
					}else{
						showFailToast({ message: res.msg })
					}
					this.isLoading = false;
				});
			},
			// 选择固定金额
			ckPrice(val) {
				this.custom = val;
			},
		},
		watch: {
			// 对输入金额校验
			custom(newval) {
				if (!newval) {
					return;
				}
				// 不能有两个点
				if (newval.lastIndexOf(".") != newval.indexOf(".")) {
					showFailToast({ message: "不能有一个小数点以上" });
					this.isError = false;
					return;
				}
				// 不能是小数点结尾
				if (newval.lastIndexOf(".") == newval.length - 1) {
					this.isError = false;
					return;
				}
				// 不能小于0,先判断有没有小数点
				if (newval.lastIndexOf(".") != -1&&newval.slice(0,newval.lastIndexOf(".")) <= 0) {
					showFailToast({ message: "输入金额不能小于0" });
					this.isError = false;
					return;
				}
				// 保留两位小数,先判断有没有小数点
				if (newval.lastIndexOf(".") != -1&&newval.slice(newval.lastIndexOf(".")+1, newval.length).length > 2) {
					showFailToast({ message: "目前最小单位为---分" });
					this.isError = false;
					return;
				}
				// 不能为0
				if (newval == 0) {
					this.isError = false;
					return;
				}
				
				this.isError = true;
			},
		},
	};
</script>

<style lang="less" scoped>
	.hwx{
		z-index: 999;
	}
	.select {
		width: 98%;
		padding: 5px 10px;
		margin: 10px auto 0 auto;
		box-sizing: border-box;
		color: rgb(47, 47, 193);
		border-top: 1px solid rgb(47, 47, 193);
		.head {
			width: max-content;
			margin: -18px auto 0 auto;
			background: white;
			text-align: center;
		}

		.op {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-around;
			padding: 10px;
			box-sizing: border-box;
			span {
				width: 20%;
				height: 30px;
				margin-left: 8%;
				margin-bottom: 2%;
				border: 1px solid rgb(47, 47, 193);
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>
